<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax演示</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">

        $(function () {
            alert("goto");
            //最简单的Ajax调用方法,通过调用JQuery对象的load,远程加载一个html片段到当前元素
            $("#mainDivID").load("ui.html")

            //通过get完成了一次从前台传参数到后台调用,并且后台成功调用了把返回值传入前端的回调函数
            $("#getBtnID").click(function () {
                $.get("getUser", {name: 'zhang', age: 20}, function (data) {
                    alert(data);
                });
            })
            //通过post完成了一次从前台传参数到后台调用,并且后台成功调用了把返回值传入前端的回调函数
            $("#postBtnID").click(function () {
                $.post("getUser", {name: 'li', age: 30}, function (data) {
                    alert(data);
                });
            })

            $("#ajaxBtnID").click(function () {

                //调用最基本的ajax方法的调用,默认请求地址是url data是提交的数据,dataType是返回数据的类型(比较重要) success是成功后的回调函数
                $.ajax({url: "getUser",
                        data:{name:"wang",age:30},
                        dataType:"text",
                        success:function (data) {
                            alert("from JQuery AJAX"+data);
                        }
                });

            })

            $("#jsonAjaxBtnID").click(function () {

                //调用json格式返回字符串,一定要把dataType设置为json格式,然后在返回值的地方要返回JSON格式字符串, 就可以顺利解析
                $.ajax({url: "getUser",
                        data:{name:"wang",age:30},
                        //如果当前页面是表单提交,表单里面的属性比较多,那么就可以用serialize方法,把当前表单上面的input转化成为连接字符串如下:
                    //   data:$("form").serialize() ,
                        dataType:"json",
                    //把当前ajax请求可以转化成Post方法
                        type:"POST",
                        success:function (data) {
                            alert("from JQuery JSON-AJAX name:"+data.name+"  age:"+data.age);
                        }
                });

            })


        })
    </script>
</head>
<body>
<div id="mainDivID"></div>
<button id="getBtnID">Get</button>
<button id="postBtnID">Post</button>
<button id="ajaxBtnID">AJAX</button>
<button id="jsonAjaxBtnID">JSONAJAX</button>
</body>
</html>